import React from 'react';
import { Form, Row, DatePicker, Button, Select, Input, Col } from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker

const SearchForm = ({ form: { getFieldDecorator, getFieldsValue }, onSearch, onClick, advanced, searchItem, resetForm, statusList }) => {
  const onHandleAdvanced = () => {
    if (onClick) {
      onClick();
    }
  };
  const formItemLayout = {
    // 抽屉里面Form。二列的布局比例
    labelCol: {
      span: 6
    },
    wrapperCol: {
      span: 16
    }
  };
  return (
    <Form className="search-form">
      <Row gutter={24}>
        <Col span={5}>
          <FormItem label="批号"{...formItemLayout}>
            {getFieldDecorator('batchNo', {
              initialValue: searchItem.batchNo || ''
            })(
              <Input placeholder='请输入批号' allowClear onPressEnter={() => onSearch(getFieldsValue())} />
            )}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="领料单号"{...formItemLayout}>
            {getFieldDecorator('checkItemName', {
              initialValue: searchItem.checkItemName || ''
            })(
              <Input placeholder='请输入领料单号' allowClear onPressEnter={() => onSearch(getFieldsValue())} />
            )}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="发料状态"{...formItemLayout}>
            {getFieldDecorator('checkTypeSecond', {
              initialValue: searchItem.checkTypeSecond
            })(
              <Select placeholder='请选择发料状态' allowClear >
                {
                  statusList.map(item => {
                    return <Option key={item.id}>{item.value}</Option>
                  })
                }
              </Select>
            )}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="领料车间"{...formItemLayout}>
            {getFieldDecorator('checkResult', {
              initialValue: searchItem.checkResult
            })(
              <Select placeholder='请选择领料车间' allowClear >
                {
                  statusList.map(item => {
                    return <Option key={item.id}>{item.value}</Option>
                  })
                }
              </Select>
            )}
          </FormItem>
        </Col>
        <Col span={4} style={{ display: 'flex' }} className="serarch-btns">
          <FormItem>
            <Button icon="search" type="primary" onClick={() => onSearch(getFieldsValue())}>
              {'查询'}
            </Button>
          </FormItem>
          <FormItem>
            <Button type="primary" icon={advanced ? 'up' : 'down'} onClick={() => onHandleAdvanced()}>
              {'展开'}
            </Button>
          </FormItem>
          <FormItem>
            <Button type="default" icon={'redo'} onClick={() => resetForm()}>
              {'重置'}
            </Button>
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        {
          advanced ? <Col span={5}>
            <FormItem label="备料仓库"{...formItemLayout}>
              {getFieldDecorator('checkResult', {
                initialValue: searchItem.checkResult
              })(
                <Select placeholder='请选择备料仓库' allowClear >
                  {
                    statusList.map(item => {
                      return <Option key={item.id}>{item.value}</Option>
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col> : ''
        }
        {
          advanced ? <Col span={5}>
            <FormItem label="物料编码"{...formItemLayout}>
              {getFieldDecorator('checkResult', {
                initialValue: searchItem.checkResult || ''
              })(
                <Input placeholder='请输入物料编码' allowClear onPressEnter={() => onSearch(getFieldsValue())} />
              )}
            </FormItem>
          </Col> : ''
        }
        {
          advanced ? <Col span={5}>
            <FormItem label="图号"{...formItemLayout}>
              {getFieldDecorator('applyUserName', {
                initialValue: searchItem.applyUserName || ''
              })(
                <Input placeholder='请输入图号' allowClear onPressEnter={() => onSearch(getFieldsValue())} />
              )}
            </FormItem>
          </Col> : ''
        }
        {
          advanced ? <Col span={5}>
            <FormItem label="物料名称"{...formItemLayout}>
              {getFieldDecorator('applyUserName', {
                initialValue: searchItem.applyUserName || ''
              })(
                <Input placeholder='请输入物料名称' allowClear onPressEnter={() => onSearch(getFieldsValue())} />
              )}
            </FormItem>
          </Col> : ''
        }
        {
          advanced ? <Col span={5}>
            <FormItem label="图号"{...formItemLayout}>
              {getFieldDecorator('applyUserName', {
                initialValue: searchItem.applyUserName || ''
              })(
                <Input placeholder='请输入图号' allowClear onPressEnter={() => onSearch(getFieldsValue())} />
              )}
            </FormItem>
          </Col> : ''
        }
        {
          advanced ? <Col span={5}>
            <FormItem label="物料变更"{...formItemLayout}>
              {getFieldDecorator('applyUserName', {
                initialValue: searchItem.applyUserName
              })(
                <Select placeholder='请选择物料变更' allowClear >
                  {
                    statusList.map(item => {
                      return <Option key={item.id}>{item.value}</Option>
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col> : ''
        }
        {
          advanced ? <Col span={5}>
            <FormItem label="成品状态"{...formItemLayout}>
              {getFieldDecorator('applyUserName', {
                initialValue: searchItem.applyUserName
              })(
                <Select placeholder='请选择成品状态' allowClear >
                  {
                    statusList.map(item => {
                      return <Option key={item.id}>{item.value}</Option>
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col> : ''
        }
      </Row>
    </Form>
  );
};

export default Form.create()(SearchForm);
